<template>
  <div class="login_page">
    <div class="login_header"></div>
    <div class="login_pannel">
      <div class="logo">
        <el-image :src="logoImage" class="logo-image"></el-image>
      </div>
      <div class="login_text">
        <div>采购后台管理系统</div>
      </div>
      <div class="form">
        <el-form label-width="80" :model="logoFormData" style="max-width: 600px">
          <el-form-item label="" label-width="0" >
            <el-input v-model="logoFormData.username" prefix-icon="UserFilled" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="" label-width="0" >
            <el-input v-model="logoFormData.password"  prefix-icon="Lock" placeholder="请输入密码" />
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="" label-width="0">
                <el-checkbox v-model="logoFormData.rememberMe">记住用户名</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="" label-width="0">
                <el-checkbox v-model="logoFormData.rememberPassword">记住密码</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label-width="0">
            <el-button type="primary" @click="submitForm(formRef)">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import { reactive, ref } from 'vue';

const lineHeight = ref("35px");
// 动态设置logo图片路径
const logoImage = new URL('../../assets/logo.png', import.meta.url).href;
const logoFormData = reactive(
  {
    username: '',
    password: '',
    rememberMe: false,
    rememberPassword: false,
  }
);
</script>
<style lang="scss" scoped>
.login_page {
  background-color: #626aef;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  .login_pannel {
    // 水平居中
    width: 350px;
    margin: 0 auto;
    // 垂直居中
    align-self: center;
    .logo {
      text-align: center;
      .logo-image {
        width: 80px;
        height: 80px;
        border-radius: 100%;
        background: #fff;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      }
    }
    .login_text {
      text-align: center;
      line-height: 35px;
      color: #fff;
      font-size: 26px;
      letter-spacing: 2px;
    }
    ::v-deep .el-form-item__label {
      color: #fff;
      line-height: v-bind(lineHeight);
      height: v-bind(lineHeight);
    }
    ::v-deep .el-checkbox__label {
      color: #fff;
      line-height: v-bind(lineHeight);
      height: v-bind(lineHeight);
    }
    ::v-deep .el-form-item__content{
      line-height: v-bind(lineHeight);
      height: v-bind(lineHeight);
      .el-button {
        width: 100%;
      }
    }
  }
}
</style>